<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <FlightsFilters :data="flightsList" @sentFilterList="sentFilterList" />

        <!-- 航班头部布局 -->
        <FormHead />

        <!-- 航班信息 遍历所有的机票信息-->
        <div v-if="flightsList.flights">
          <FormList
            v-for="(flightItem, index) in dataList"
            :key="flightItem.id"
            :flightItem="flightItem"
            @click.native="setShowIndex(index)"
            :isShow="currentIndex === index"
          />
        </div>
        <!-- 空状态提示 -->
        <div v-if="flightsList.flights && filterList.length === 0" class="tips">
          来晚了,机票卖完了!
        </div>
        <el-pagination
          v-if="flightsList.flights"
          layout="total,sizes,prev, pager, next,jumper"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          :total="filterList.length"
          :current-page="pageIndex"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 侧边栏组件 -->
        <FlightsHistory />
      </div>
    </el-row>
  </section>
</template>

<script>
import FormHead from "@/components/air/FormHead";
import FormList from "@/components/air/FormList";
import FlightsFilters from "@/components/air/FlightsFilters";
import FlightsHistory from "@/components/air/FlightsHistory";
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: 5,
      //获取最开始的机票列表总数据
      flightsList: {},
      //过滤筛选后机票列表数据
      filterList: [],
      currentIndex: -1,
    };
  },
  components: {
    FormHead,
    FormList,
    FlightsFilters,
    FlightsHistory,
  },
  methods: {
    // 封装函数获取机票数据
    loadFlights() {
      this.$axios({
        url: "/airs",
        params: this.$route.query,
      }).then((res) => {
        // console.log(res);
        // 将获取的机票数据存储到flightsList
        this.flightsList = res.data;
        // 一开始就让筛选的机票数据filterList等于请求获取的所有的列表数据
        this.filterList = res.data.flights;
        // console.log(this.flightsList, "flightsList");
        // 出发计算属性的函数 进行分页
        // this.dataList;
        this.currentIndex = -1;
      });
    },
    // 获取当前的显示条数
    handleSizeChange(size) {
      this.pageSize = size;
      //如果有筛选 重新将打开的机票列表全都收起来
      // this.currentIndex = -1;
    },
    // 获取当前显示的页面
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      // 页码变化将显示的座位下拉信息全都收起来
      // this.currentIndex = -1;
    },
    // 接收筛选的机票列表
    sentFilterList(filterList) {
      // console.log(filterList);
      this.filterList = filterList;
      //如果有筛选 重新将打开的机票列表全都收起来
      this.currentIndex = -1;
      // 筛选后将机票列表的数据显示 设置为第一页的数据
      this.pageIndex = 1;
    },
    // 监听点击事件 处理子组件座位的显示
    setShowIndex(index) {
      if (this.currentIndex === index) {
        // 如果是已经点击过的且显示的座位机票列表 将设置的currentIndex变为-1 使其列表再次点击能够收起来
        this.currentIndex = -1;
      } else {
        // 将点击的当前的机票下标存储到data的currentIndex
        this.currentIndex = index;
      }
    },
  },
  created() {
    // 发送请求获取机票数据
    this.loadFlights();
  },
  computed: {
    dataList() {
      //根据点击的页码和显示的条数 改造数据获取 需要显示的机票数据
      // 起始下标
      let beginIndex = (this.pageIndex - 1) * this.pageSize;
      // 结束下标
      let endIndex = beginIndex + this.pageSize;
      // console.log(this.flightsList.slice(beginIndex, endIndex), "需要数据");
      this.currentIndex = -1;
      //根据起始和结束 截取需要显示的数组数据
      //this.filterList的状态：1.没有任何筛选的请求数据 2.筛选后的数据
      //slice() 并不会修改数组
      return this.filterList.slice(beginIndex, endIndex);
      // console.log(this.dataList);
    },
  },
  watch: {
    // 监听$route当前跳转的路由变化 刷新机票数据 处理点击历史记录显示机票列表
    $route() {
      // 加载机票数据
      this.loadFlights();
    },
  },
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
  .tips {
    padding: 10px 0;
    color: red;
    font-weight: 700;
  }
}

.aside {
  width: 240px;
}
</style>